<template>
  <div class="uploadimg">
    <!-- el-upload：上传的组件 -->
    <!-- action：设置上传的服务器地址（我们并不是上传到简单的服务器中，而是上传到腾讯云的存储桶中） -->
    <!-- list-type：上传组件显示的结构！！  -->
    <!-- 上传结构 -->
    <el-upload
      v-if="!imageURL"
      action="#"
      list-type="picture-card"
      :before-upload="beforeUpload"
      :http-request="httpRequest"
    >
      <i class="el-icon-plus" />
      <!-- 上传图片的进度条 -->
      <el-progress
        v-if="propShow"
        :percentage="percentage"
        :show-text="false"
      />
    </el-upload>
    <!-- 图片结构 -->
    <div v-else class="imgbox" @click="imgShow">
      <img :src="imageURL" alt="">
      <i class="el-icon-close" @click.stop="clearImg" />
    </div>
    <!-- 预览结构 -->
    <el-dialog title="预览图片" :visible.sync="dialogShow">
      <img :src="imageURL" class="myimg" alt="">
    </el-dialog>
  </div>
</template>

<script>
// 导入腾讯云组件
import COS from 'cos-js-sdk-v5'
export default {
  // 接收一个参数 代表默认现显示的图片
  props: ['imageURL'],
  data() {
    return {
      dialogShow: false,
      cos: null, // 上传资源到cos对象
      // 当前上传进度条
      percentage: 0,
      // 控制进度条的显示与隐藏
      propShow: false
    }
  },
  created() {
    // 打开页面时初始化cos对象
    this.cos = new COS({
      SecretId: 'AKIDud6IEtHPGq9CyThfMmvnOilX2GDsHPGq', // 身份识别 ID
      SecretKey: 'KOBhvub1A3ey0lGUR7XgYAWbPwCBtKVQ' // 身份密钥
    })
  },
  methods: {
    // 自定义上传逻辑
    httpRequest(file) {
      // 显示进度条
      this.propShow = true
      // 得到上传框中选中的文件
      const myfile = file.file
      // console.log(file)
      // 通过cos对象上传文件到腾讯云中
      this.cos.putObject(
        {
          Bucket: 'hr-79-1310030388' /* 必须 */,
          Region: 'ap-nanjing' /* 存储桶所在地域，必须字段 */,
          Key: myfile.name /* 必须 */,
          StorageClass: 'STANDARD',
          Body: myfile, // 上传文件对象
          onProgress: (progressData) => {
            // 上传过程中的实时进度对象
            // console.log(JSON.stringify(progressData))
            setTimeout(() => {
              // 修改进度条
              this.percentage = progressData.percent * 100
            }, 350)
          }
        },
        (err, data) => {
          // err 上传出错的的错误信息
          // data 上传成功后的返回值
          console.log(err || data)
          // 将返回回来的图片路径赋值给 imgUrl
          this.$emit('update:imageURL', 'https://' + data.Location)
          setTimeout(() => {
            // 关闭进度条
            this.propShow = false
            // 重置进度条
            this.percentage = 0
          }, 1000)
        }
      )
    },
    // 选择图片后进行检验
    beforeUpload(file) {
      // file选择的文件类型
      const isType =
        file.type === 'image/jpeg' ||
        file.type === 'image/jpg' ||
        file.type === 'image/png'
      if (!isType) {
        // 当上传的文件类型不符合要求时进行提示
        this.$message.error('抱歉，暂不支持此类文件')
        return false
      }
      // 检验文件的体积
      const imgSize = file.size <= 2 * 1024 * 1024
      if (!imgSize) {
        // 当上传文件体积大于要求时触发
        this.$message.error('上传文件体积不能大于2M')
        return false
      }
      return true
    },
    // 点击时显示图片预览效果
    imgShow() {
      this.dialogShow = true
    },
    // 点击时清除图片
    clearImg() {
      this.$emit('update:imageURL', '')
    }
  }
}
</script>

<style lang="scss">
.uploadimg {
  .imgbox {
    width: 150px;
    height: 150px;
    position: relative;
    &:hover {
      i{
        display: block;
      }
    }
    img {
      width: 150px;
      height: 150px;
      object-fit: contain;
    }
    i {
      position: absolute;
      right: 0;
      top: 0;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.5);
      padding: 4px;
      border-radius: 0 0 0 30px;
      display: none;
    }
  }
  .el-dialog {
    width: 38% !important;
    text-align: center;
  }
  .myimg {
    max-width: 75%;
  }
}
</style>
